<%--
  Created by IntelliJ IDEA.
  User: 老白
  Date: 2021/6/18
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加图书</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

</head>
<body>
<div id="all">
    <div class="header container-fluid">
        <%@include file="modeHeader.jsp" %>
    </div>
    <div class="container-fluid">
        <div class="row border" style="height: 65vh;">
            <div class="col-sm-3 ">
                <%@include file="modeLeftList.jsp" %>
            </div>
            <div class="col-sm-9 border h-100 d-inline-block overflow-auto">
                <form method="post" action="/book?type=add">
                    <div class="form-group">
                        <label for="bookFengMian">书籍封面</label>
                        <input type="hidden" class="form-control" id="bookFengMian" aria-describedby="bookFengMianHelp"
                               name="bookFengMian" value="">
                        <img src="" id="uploadImage">
                        <small id="bookFengMianHelp" class="form-text text-muted">
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#exampleModal">
                                请上传图片
                            </button>
                        </small>
                    </div>
                    <div class="form-group">
                        <label for="bookName">书籍名称</label>
                        <input type="text" class="form-control" id="bookName" aria-describedby="bookNameHelp"
                               name="bookName">
                        <small id="bookNameHelp" class="form-text text-muted">请输入书籍名称</small>
                    </div>
                    <div class="form-group">
                        <label for="bookPrice">书籍价钱</label>
                        <input type="text" class="form-control" id="bookPrice" aria-describedby="bookPriceHelp"
                               name="bookPrice">
                        <small id="bookPriceHelp" class="form-text text-muted">请输入书籍价钱</small>
                    </div>
                    <div class="form-group">
                        <label for="bookNumber">书籍数量</label>
                        <input type="text" class="form-control" id="bookNumber" aria-describedby="bookNumberHelp"
                               name="bookNumber">
                        <small id="bookNumberHelp" class="form-text text-muted">请输入书籍数量</small>
                    </div>
                    <div class="form-group">
                        <label for="bookType">书籍类型</label>
                        <input type="text" class="form-control" id="bookType" aria-describedby="bookTypeHelp"
                               name="bookType">
                        <small id="bookTypeHelp" class="form-text text-muted">请输入书籍类型</small>
                    </div>
                    <div class="form-group">
                        <label for="bookAuthor">书籍作者</label>
                        <input type="text" class="form-control" id="bookAuthor" aria-describedby="bookAuthorHelp"
                               name="bookAuthor">
                        <small id="bookAuthorHelp" class="form-text text-muted">请输入书籍作者</small>
                    </div>
                    <div class="form-group">
                        <label for="bookAbstract">书籍简介</label>
                        <input type="text" class="form-control" id="bookAbstract" aria-describedby="bookAbstractHelp"
                               name="bookAbstract">
                        <small id="bookAbstractHelp" class="form-text text-muted">请输入书籍简介</small>
                    </div>
                    <button type="submit" class="btn btn-primary">添加图书</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">上传图片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="file" name="myFile" id="photoFile">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="closesModel()">上传</button>

                </div>
            </div>
        </div>
    </div>

    <%@include file="foot.jsp" %>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function closesModel() {
        if ($("#photoFile").val() == '') {
            return;
        }
        var formData = new FormData();
        formData.append('myFile', document.getElementById('photoFile').files[0]);
        $.ajax({
            url: "/uploadBookFengMian",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data)
                $('#uploadImage').attr('src',data)
                $('#bookFengMian').val(data)
                $('#exampleModal').modal('hide')
                $('.modal-backdrop').remove();//去掉遮罩层

            },
            error: function (data) {
                alert(data)
            }
        });

    }
</script>
</body>
</html>
